<script>
import BlogItem from "../../../components/blog/BlogItem.vue";
import {listBlog, pageBlog} from "../../../api/blog";
import {listGroups} from "../../../api/group";

export default {
    name: "Article",
    components: {BlogItem},
    data() {
        return {
            blogList:[],
            param:{
                current:0,
                size:5,
                groupId:0,
            },
            pageInfo:{
                pages:0,
                total:0
            },
            options:[]
        }
    },
    methods: {
        pageBlog(){
            this.param.current++;
            let param=this.param;
            if(param.groupId===0)
                delete param.groupId
            pageBlog(param)
                .then(res=>{
                    this.blogList=this.blogList.concat(res.data.records);
                    this.pageInfo.pages = res.data.pages
                    this.pageInfo.total = res.data.total
                })
        },
        removeItem(i){
            this.blogList.splice(i,1)
        },
        getGroupList(){
            listGroups(this.user.userId)
                .then(res=>{
                    if(res.code===200)
                        this.options=res.data
                })
        },
        selectGroup(){
            this.param.current=0;
            this.blogList=[]
            this.pageBlog();
        }
    },
    mounted() {
        this.param.ownerId=this.user.userId
        this.pageBlog();
        this.getGroupList()
    },
    computed: {
        user() {
            return this.$store.state.userInfo;
        }
    }
}
</script>
<template>
    <div class="flex row align-center center group-box">
        <div class="flex column align-center group-left">
            <div class="flex column" style="width: 100%">
                <div class="flex row align-center space-between" style="width: 100%">
                    <h2>文章管理</h2>
                    <el-select  v-model="param.groupId" placeholder="选择专栏" @change="selectGroup" >
                        <el-option label="全部" :value="0"/>
                        <el-option
                            v-for="item in options"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </div>
                <el-divider style="margin: 0 0 10px 0;!important;"/>
            </div>
            <BlogItem v-for="(item,i) in blogList" :value="item" @remove="removeItem" :index="i"/>
            <el-button v-if="pageInfo.pages>param.current" @click="pageBlog">more</el-button>
        </div>

    </div>
</template>

<style scoped>

.group-box {
    height: 100%;
    width: 100%
}

.group-left {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}

</style>
